<template>
  <div class="course-header">
    <div class="m-center">
      <div class="left">
        <div class="img-box">
          <img :src="userInfo.avatar" alt="" style="object-fit: cover">
        </div>
        <div class="user-info">
          <p class="name">
            {{ userInfo.nickname }}
          </p>
          <p class="other">
            <span>{{ userInfo.mobile }}</span>
          </p>
          <p class="other">
            <span v-if="userInfo.sex == 0">性别：男</span>
            <span v-if="userInfo.sex == 1">性别：女</span>
            <span v-if="userInfo.sex == 2">性别：保密</span>
          </p>
        </div>
      </div>

      <div class="right">
        <dl>
          <dd>
            <span v-if="userInfo.teacher == 0">普通用户</span>
            <span v-if="userInfo.teacher == 1">讲师用户</span>
            <span>用户类型</span>
          </dd>
        </dl>
      </div>
    </div>
  </div>
</template>
<script>
import {getInfo, getUserById} from '@/api/user';

export default {
  data(){
    return{
      userInfo:{}
    }
  },
  methods: {
    // 获取用户信息
    getUserInfo(){
      getInfo().then(result => {
        let { code, data } = result
        if (code === 20000) {
          getUserById(data.userInfo.id).then(result => {
            let { code, data } = result
            if (code === 20000){
              this.userInfo = data.item
            }
          })
        }
      })
    },
  },
  created () {
    this.getUserInfo()
  }
}
</script>
<style lang="stylus" scoped>
  .course-header
    padding-top: 24px;
    width: 100%;
    height: 148px;
    background: url('./bg.png') no-repeat center top;
    background-size: cover;
    box-sizing: border-box;
    color: #fff;
    .left
      float: left;
      display: flex;
      align-items: center;
      .img-box
        margin-right: 20px;
        flex: 0 0 140px;
        width: 140px;
        height: 140px;
        border-radius: 50%;
        box-sizing: border-box;
        border: 4px solid #fff;
        & > img
          display: block;
          width: 100%;
          height: 100%;
          border-radius: 50%;
      .user-info
        margin-top: -40px;
        .name
          font-size: 24px;
          line-height: 38px;
          color: #fff;
          font-weight: 600;
        .other
          margin-top: 10px;
          font-size: 14px;
          color: #fff;
          & > span
            display: inline-block;
            margin-right: 10px;
    .right
      float: right;
      margin-top: 24px;
      dl
        dt,dd
          display: inline-block;
          vertical-align: middle;
          margin-right: 24px;
          & > span
            display: block;
            font-size: 14px;
            color: rgba(255,255,255,0.8);
            text-align: center;
            line-height: 24px;
            &:first-child
              margin-bottom: 4px;
              font-size: 26px;
              font-weight: 700;
        dt
          margin-right: 24px;
          padding: 8px 16px;
          border: 1px solid rgba(255,255,255,.4);
          border-radius: 18px;
          line-height: 20px;
          color: rgba(255,255,255,0.8);
          font-size: 14px;
          cursor: pointer;
          &:hover
            border-color: rgba(255,255,255,1);
            color: #fff;
          .iconfont
            padding-right: 5px;
</style>
